@{
    ViewData["Title"] = "库区设置";
    Layout = null;
    var warehouseId = (int)ViewBag.WarehouseId;
}

<!-- 直接引入所有必要的CSS和JS文件 -->
<link href="~/libs/scripts/layui-v2.5.6/layui/css/layui.css" rel="stylesheet" />
<script src="~/libs/jquery/jquery.js"></script>
<script src="~/libs/scripts/layui-v2.5.6/layui/layui.js"></script>

<!-- 自定义样式 -->
<style>
    .warehouse-area-container {
        padding: 32px 0;
        background: #f4f6fa;
        min-height: 100vh;
        font-family: 'Segoe UI', 'Microsoft YaHei', Arial, sans-serif;
    }
    
    .search-card {
        background: #fff;
        border-radius: 12px;
        box-shadow: 0 4px 24px rgba(30, 159, 255, 0.08), 0 1.5px 6px rgba(0,0,0,0.03);
        margin-bottom: 24px;
        border: 1px solid #e6eaf0;
        overflow: hidden;
    }
    
    .search-form {
        padding: 28px 28px 8px 28px;
        background: #fff;
        border-radius: 12px;
    }
    
    .search-form .layui-form-label {
        color: #1e9fff;
        font-weight: 500;
        width: 90px;
        text-align: right;
        font-size: 15px;
        padding: 8px 15px;
    }
    
    .search-form .layui-input {
        border: 1px solid #e6eaf0;
        background: #f9fbfd;
        color: #333;
        border-radius: 6px;
        padding: 0 10px;
        transition: all 0.2s ease;
        font-size: 15px;
        height: 38px;
        line-height: 38px;
    }
    
    .search-form .layui-input:focus {
        border-color: #1e9fff;
        box-shadow: 0 0 0 2px rgba(30,159,255,0.1);
        outline: none;
        background: #fff;
    }
    
    .search-form .layui-btn {
        border-radius: 6px;
        font-weight: 500;
        padding: 0 22px;
        height: 38px;
        line-height: 38px;
        font-size: 15px;
        margin-right: 10px;
    }
    
    .data-card {
        background: #fff;
        border-radius: 12px;
        box-shadow: 0 4px 24px rgba(30, 159, 255, 0.08), 0 1.5px 6px rgba(0,0,0,0.03);
        overflow: hidden;
        border: 1px solid #e6eaf0;
    }
    
    .data-card-body {
        padding: 28px;
    }
    
    .action-bar {
        margin-bottom: 18px;
        padding: 0;
        border-bottom: none;
        display: flex;
        gap: 12px;
        flex-wrap: wrap;
    }
    
    .action-bar .layui-btn {
        border-radius: 6px;
        font-weight: 500;
        margin-right: 0;
        height: 36px;
        line-height: 36px;
        padding: 0 18px;
        font-size: 14px;
    }
    
    /* 操作列按钮样式 */
    .operation-btns {
        display: flex;
        gap: 15px;
        justify-content: center;
        align-items: center;
    }
    
    .operation-btns .layui-btn {
        padding: 0;
        height: auto;
        line-height: normal;
        font-size: 14px;
        border-radius: 0;
        margin: 0;
        min-width: auto;
        background: none;
        border: none;
        text-decoration: none;
        cursor: pointer;
        transition: all 0.2s;
    }
    
    .operation-btns .btn-location {
        color: #009688;
    }
    
    .operation-btns .btn-edit {
        color: #1e9fff;
    }
    
    .operation-btns .btn-delete {
        color: #ff5722;
    }
    
    .operation-btns .layui-btn:hover {
        opacity: 0.8;
        text-decoration: underline;
    }
    
    /* 表格样式优化 */
    .layui-table th {
        background: #f4f6fa;
        color: #1e9fff;
        font-weight: 600;
        font-size: 15px;
        height: 40px;
        padding: 10px 12px;
        text-align: center;
    }
    
    .layui-table td {
        font-size: 14px;
        height: 38px;
        padding: 10px 12px;
        text-align: center;
    }
    
    .layui-table {
        border: 1px solid #e6eaf0;
        margin: 0;
        border-radius: 10px;
        overflow: hidden;
        background: #fff;
    }
    
    .layui-table-header {
        margin-bottom: 0;
    }
    
    /* 表格列宽调整样式 */
    .layui-table-cell {
        padding: 0 8px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    
    /* 表格行样式 */
    .layui-table tr:hover {
        background-color: #f8f8f8;
    }
    
    /* 表格边框样式 */
    .layui-table-view {
        margin: 0;
    }
    
    /* 表格分页样式 */
    .layui-table-page {
        margin-top: 10px;
        text-align: right;
    }
    
    /* 返回按钮样式 */
    .back-btn {
        display: inline-flex;
        align-items: center;
        border-radius: 6px;
        background: #f4f6fa;
        color: #1e9fff;
        padding: 6px 18px;
        font-size: 15px;
        border: 1px solid #e6eaf0;
        margin-bottom: 18px;
        transition: background 0.2s;
    }
    
    .back-btn:hover {
        background: #e3f2fd;
        color: #1890ff;
    }
    
    /* 库区标题 */
    .warehouse-title {
        font-size: 18px;
        margin-bottom: 15px;
        color: #333;
        font-weight: 500;
    }
    
    /* 响应式优化 */
    @@media (max-width: 1200px) {
        .search-card, .data-card {
            max-width: 100%;
            padding: 16px 4px 4px 4px;
        }
    }
    @@media (max-width: 800px) {
        .warehouse-area-container {
            padding: 8px 0;
        }
        .search-form .layui-form-label {
            width: 60px;
            font-size: 13px;
        }
        .search-form .layui-input {
            font-size: 13px;
        }
    }
</style>

<div class="warehouse-area-container">
    <!-- 返回按钮 -->
    <div class="back-btn" onclick="history.back()">
        <i class="layui-icon layui-icon-left"></i> 返回仓库设置
    </div>
    
    <!-- 库区标题 -->
    <div class="warehouse-title">
        <span id="warehouseName">库区设置</span>
    </div>
    
    <!-- 搜索区域 -->
    <div class="search-card">
        <div class="search-form">
            <form class="layui-form" lay-filter="searchForm" id="searchForm">
                <div class="layui-row layui-col-space15">
                    <div class="layui-col-md4">
                        <div class="layui-form-item">
                            <label class="layui-form-label">库区编码</label>
                            <div class="layui-input-block">
                                <input type="text" name="areaCode" placeholder="请输入库区编码" autocomplete="off" class="layui-input">
                            </div>
                        </div>
                    </div>
                    <div class="layui-col-md4">
                        <div class="layui-form-item">
                            <label class="layui-form-label">库区名称</label>
                            <div class="layui-input-block">
                                <input type="text" name="areaName" placeholder="请输入库区名称" autocomplete="off" class="layui-input">
                            </div>
                        </div>
                    </div>
                    <div class="layui-col-md4">
                        <div class="layui-form-item">
                            <label class="layui-form-label">库区类型</label>
                            <div class="layui-input-block">
                                <input type="text" name="areaType" placeholder="请输入库区类型" autocomplete="off" class="layui-input">
                            </div>
                        </div>
                    </div>
                </div>
                
                <div style="text-align: center; margin-top: 15px;">
                    <button class="layui-btn layui-btn-normal layui-btn-sm" lay-submit lay-filter="searchBtn">
                        <i class="layui-icon layui-icon-search"></i> 搜索
                    </button>
                    <button type="button" class="layui-btn layui-btn-primary layui-btn-sm" id="resetBtn">
                        <i class="layui-icon layui-icon-refresh"></i> 重置
                    </button>
                </div>
            </form>
        </div>
    </div>

    <!-- 数据表格区域 -->
    <div class="data-card">
        <div class="data-card-body">
            <!-- 操作按钮栏 -->
            <div class="action-bar">
                <button class="layui-btn layui-btn-sm layui-btn-normal" id="addBtn">
                    <i class="layui-icon layui-icon-add-1"></i> 新增
                </button>
                <button class="layui-btn layui-btn-sm" id="editBtn">
                    <i class="layui-icon layui-icon-edit"></i> 编辑
                </button>
                <button class="layui-btn layui-btn-sm layui-btn-danger" id="deleteBtn">
                    <i class="layui-icon layui-icon-delete"></i> 删除
                </button>
            </div>

            <!-- 数据表格 -->
            <table class="layui-hide" id="warehouseAreaTable" lay-filter="warehouseAreaTable"></table>
        </div>
    </div>
</div>

<!-- 操作列模板 -->
<script type="text/html" id="barTpl">
    <div class="operation-btns">
        <a class="layui-btn btn-location" lay-event="location" title="库位">库位</a>
        <a class="layui-btn btn-edit" lay-event="edit" title="修改">修改</a>
        <a class="layui-btn btn-delete" lay-event="del" title="删除">删除</a>
    </div>
</script>

<script>
    // 获取URL参数
    function getUrlParam(name) {
        var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
        var r = window.location.search.substr(1).match(reg);
        if (r != null) return unescape(r[2]); return null;
    }
    
    // 获取当前仓库ID
    var warehouseId = @warehouseId;
    
    layui.use(['table', 'form', 'layer'], function () {
        var table = layui.table,
            form = layui.form,
            layer = layui.layer,
            $ = layui.$;
            
        // 如果有仓库ID，加载仓库名称
        if (warehouseId > 0) {
            loadWarehouseInfo(warehouseId);
        }
            
        // 数据表格配置
        var tableIns = table.render({
            elem: '#warehouseAreaTable',
            url: '/WarehouseManagement/WarehouseAreaSetting/GetWarehouseAreaSettings',
            where: {
                warehouseId: warehouseId
            },
            toolbar: false,
            defaultToolbar: ['filter', 'exports', 'print'],
            cols: [[
                { type: 'checkbox', width: 40, fixed: 'left' },
                { field: 'id', width: 70, title: 'ID', sort: true, align: 'center' },
                { field: 'areaCode', title: '库区编码', width: 110, align: 'center' },
                { field: 'areaName', title: '库区名称', width: 120, align: 'center' },
                { field: 'warehouseName', title: '所属仓库', width: 130, align: 'center' },
                { field: 'area', title: '面积(㎡)', width: 90, align: 'center' },
                { field: 'remark', title: '备注', minWidth: 180 },
                { fixed: 'right', title: '操作', toolbar: '#barTpl', width: 180, align: 'center' }
            ]],
            page: true,
            limit: 10,
            limits: [10, 20, 50, 100],
            loading: true,
            cellMinWidth: 80, // 设置最小列宽
            even: true, // 开启隔行背景
            size: 'sm', // 小尺寸表格
            response: {
                statusName: 'code',
                statusCode: 0,
                msgName: 'msg',
                countName: 'count',
                dataName: 'data'
            },
            done: function (res, curr, count) {
                console.log('表格渲染完成', res);
            }
        });
        
        // 加载仓库信息
        function loadWarehouseInfo(id) {
            $.ajax({
                url: '/WarehouseManagement/WarehouseSetting/GetById/' + id,
                type: 'GET',
                success: function(res) {
                    if (res.code === 0 && res.data) {
                        $('#warehouseName').text(res.data.depotName + ' - 库区设置');
                    }
                }
            });
        }

        // 获取选中数据
        function getSelectedData() {
            var checkStatus = table.checkStatus('warehouseAreaTable');
            return checkStatus.data;
        }

        // 搜索表单提交
        form.on('submit(searchBtn)', function (data) {
            var field = data.field;
            field.warehouseId = warehouseId;
            console.log('搜索条件:', field);
            
            tableIns.reload({
                where: field,
                page: { curr: 1 }
            });
            
            return false;
        });

        // 重置搜索
        $('#resetBtn').on('click', function () {
            $('#searchForm')[0].reset();
            form.render();
            tableIns.reload({
                where: {
                    warehouseId: warehouseId
                },
                page: { curr: 1 }
            });
        });

        // 新增按钮
        $('#addBtn').on('click', function () {
            layer.open({
                type: 2,
                title: '新增库区设置',
                shadeClose: true,
                shade: 0.8,
                area: ['800px', '600px'],
                content: '/WarehouseManagement/WarehouseAreaSetting/Edit?warehouseId=' + warehouseId,
                end: function() {
                    // 弹窗关闭后刷新表格
                    tableIns.reload();
                }
            });
        });

        // 编辑按钮
        $('#editBtn').on('click', function () {
            var data = getSelectedData();
            if (data.length === 0) {
                layer.msg('请选择要编辑的数据');
                return;
            }
            if (data.length > 1) {
                layer.msg('只能选择一条数据进行编辑');
                return;
            }
            
            layer.open({
                type: 2,
                title: '编辑库区设置',
                shadeClose: true,
                shade: 0.8,
                area: ['800px', '600px'],
                content: '/WarehouseManagement/WarehouseAreaSetting/Edit?id=' + data[0].id,
                end: function() {
                    // 弹窗关闭后刷新表格
                    tableIns.reload();
                }
            });
        });

        // 删除按钮
        $('#deleteBtn').on('click', function () {
            var data = getSelectedData();
            if (data.length === 0) {
                layer.msg('请选择要删除的数据');
                return;
            }
            
            layer.confirm('确认删除选中的 ' + data.length + ' 条记录吗？', function (index) {
                var ids = data.map(function (item) {
                    return item.id;
                });
                
                // 逐个删除选中的数据
                var deletePromises = ids.map(function(id) {
                    return new Promise(function(resolve, reject) {
                        $.post('/WarehouseManagement/WarehouseAreaSetting/Delete/' + id, function (res) {
                            if (res.code === 0) {
                                resolve();
                            } else {
                                reject(res.msg || '删除失败');
                            }
                        }).fail(function() {
                            reject('网络错误');
                        });
                    });
                });
                
                Promise.all(deletePromises).then(function() {
                    layer.close(index);
                    layer.msg('删除成功');
                    tableIns.reload();
                }).catch(function(error) {
                    layer.msg('删除失败：' + error);
                });
            });
        });

        // 监听行工具事件
        table.on('tool(warehouseAreaTable)', function (obj) {
            var data = obj.data;
            
            if (obj.event === 'del') {
                layer.confirm('确认删除此库区设置吗？', function (index) {
                    $.post('/WarehouseManagement/WarehouseAreaSetting/Delete/' + data.id, function (res) {
                        if (res.code === 0) {
                            obj.del();
                            layer.close(index);
                            layer.msg('删除成功');
                        } else {
                            layer.msg(res.msg || '删除失败');
                        }
                    });
                });
            } else if (obj.event === 'edit') {
                layer.open({
                    type: 2,
                    title: '编辑库区设置',
                    shadeClose: true,
                    shade: 0.8,
                    area: ['800px', '600px'],
                    content: '/WarehouseManagement/WarehouseAreaSetting/Edit?id=' + data.id,
                    end: function() {
                        // 弹窗关闭后刷新表格
                        tableIns.reload();
                    }
                });
            } else if (obj.event === 'location') {
                // 跳转到库位管理页面
                layer.open({
                    type: 2,
                    title: data.areaName + ' - 库位管理',
                    shadeClose: true,
                    shade: 0.8,
                    area: ['90%', '90%'],
                    content: '/WarehouseManagement/WarehouseLocation/Index?areaId=' + data.id,
                    end: function() {
                        // 弹窗关闭后刷新表格
                        tableIns.reload();
                    }
                });
            }
        });
    });
</script> 